<template>
    <div class="census-main" style="margin: 0;padding:20px" :style="{height: (winH-160)+'px'}">
        <div class="opers flex v-c">
            <el-form :inline="true" class="filter-blk flex-1">
                <el-form-item label="任务名称">
                    <el-input placeholder="请输入" v-model.trim="filterForm.name"></el-input>
                </el-form-item>
                <el-form-item class="ml-20" label="状态">
                    <el-select v-model="filterForm.deviceTypeId" placeholder="请选择" clearable>
                        <el-option :label="item.name" :value="item.id" v-for="(item, key) in stateList" :key="key"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchAction"><i class="iconfont icon-search"></i> 搜索</el-button>
                    <el-button type="primary" @click="resetAction"><i class="iconfont icon-refresh"></i> 重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table 
            :data="dataList" 
            style="width: 100%"
            v-loading="loading"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="序号" width="90" :index="indexMethod"></el-table-column>
            <el-table-column prop="name" label="任务名称"></el-table-column>
            <el-table-column prop="startTime" label="开始时间"></el-table-column>
            <el-table-column prop="endTime" label="结束时间"></el-table-column>
            <el-table-column prop="deviceTypeName" label="任务状态">
                <template slot-scope="scope">
                    {{stateMap[scope.row.state]}}
                </template>
            </el-table-column>
            <el-table-column prop="assignedUserName" label="指派人">
                <template slot-scope="scope">
                    {{scope.row.assignedUserName || '未指派'}}
                </template>
            </el-table-column>
            <el-table-column prop="assignedTime" label="指派时间">
                <template slot-scope="scope">
                    {{scope.row.assignedTime || '未指派'}}
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注">
                <template slot-scope="scope">
                    {{scope.row.remark || '无'}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div class="nowrap">
                        <!-- <el-button type="blue" @click="eidtAction(scope.row)">编辑</el-button> -->
                        <el-button type="red" @click="deleteAction(scope.row,scope.$index)">删除</el-button>
                        <el-button type="green" @click="assignAction(scope.row,scope.$index)" v-if="!scope.row.assignedTime">指派</el-button>
                    </div>	
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-if="total>0"
            class="text-right mt-20 mr-20"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, total, jumper"
            :total="total">
        </el-pagination>
        <el-dialog
            :title="newModalTitle"
            :visible.sync="newModalVisible"
            v-if="newModalVisible"
            width="500px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            append-to-body
        >
			<create 
				ref="create"
	    		:activePartition="activePartition"
	    		:activeData="activeData"
	    		:typeList="typeList"
                :businessId="businessId"
	    		@success="submitSuccessAction"
	    		@fail="adding = false"
	    		@submitting="adding = true"
	    		@cancel="newModalVisible=false"
	    	>
	    	</create>
	    	<div slot="footer">
	    		<el-button type="cancel" @click="newModalVisible=false">取消</el-button>
		  		<el-button type="primary" :loading="adding" @click="submitAction">确定</el-button>
		  	</div>
		</el-dialog>
        <assign
            :visible.sync="assignModalVisible"
            v-if="assignModalVisible"
            :activeData="activeData"
            @success="onAssignSuccess"
        ></assign>
    </div>
</template>
<script>
import create from './DeviceCreate.vue'
import assign from './TaskAssign.vue'
export default {
    components: {
        create,
        assign
    },
    props: {
		winH: {
			type: Number,
			default: 500
		},
		businessId: { //企业ID
			type: String,
			default: ''
		},
        bookType: {
            type: String,
            default: '1'
        }
	},
    watch: {
        bookType() {
            this.getData(1)
        }
    },
    data () {
        return  {
            filterForm: {
            },
			loading: false,
			total: 0,
			currentPage: 1,
			pageSize: 8,
			loading: false,
			dataList: [],
            multipleSelection: [],
            stateList: [{
                id: 1,
                name: '待检测'
            },{
                id: 2,
                name: '正在检测'
            },{
                id: 3,
                name: '检测超时'
            },{
                id: 4,
                name: '检测完毕'
            }],//1 待检测 2 正在检测 3检测超时 4 检测完毕
            bookTypeMap: {
                '1': '维保',
                '2': '维修'
            },
            activePartition: null,
            activeData: null,
            newModalVisible: false,
            newModalTitle:'',
            adding: false,
            assignModalVisible: false
        }
    },
    created () {
        this.getData(1)
    },
    computed: {
        stateMap () {
            const temp = {}
            this.stateList.forEach(item=>{
                temp[item.id] = item.name
            })
            return temp
        }
    },
    methods:{
        onAssignSuccess () {
            this.getData(this.currentPage)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        getData (page) {
			this.loading = true
			let params = Object.assign({
            	page: page,
			    limit: this.pageSize,
                businessId: this.businessId,
                bookType: this.bookType
            },this.filterForm)
			this.$get('/check/maintenance/taskListPage', params).then(res => {
            	this.loading = false
            	let data = res.data
        		this.currentPage = page
            	if(data.Items){
					this.total = data.totalSize
	                this.dataList = data.Items
            	}else{
            		this.total = 0
	                this.dataList = []
            	}
            }, (err) =>{
            	this.loading = false
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		handleCurrentChange (page){
			this.getData(page)
		},
        indexMethod (index) {
        	return (this.currentPage-1)*this.pageSize + index + 1
        },
		searchAction () {
			this.getData(1)
		},
		resetAction () {
			this.filterForm = {}
			this.seatList = []
		},
        partitionClickAction (item) {
            if(item.id == 0) return
            this.activePartition = item
            this.filterForm.partitionId = item.id
            this.getData(1)
        },
        createAction (item) {
			this.activeData = null
			this.newModalTitle="新增设备"
			this.newModalVisible = true
		},
        eidtAction (item) {
			this.activeData = item
			this.newModalTitle="编辑设备"
			this.newModalVisible = true
		},
        submitAction () {
            this.$refs.create.submitAction()
        },
        submitSuccessAction () {
            this.adding = false
            this.newModalVisible = false
			this.getData(this.currentPage)
        },
		deleteAction (item) {
			this.showConfirm ('确定删除该任务吗？',()=>{
				this.deleting = true
				this.$post('/check/maintenance/taskDel', {
					id: item.id
				}).then(res => {
					this.deleting = false
					this.$message.success('删除成功')
					this.getData(this.currentPage)
				}, (err) =>{
					this.deleting = false
					this.$message.error(err.msg)
				})
			})
		},
        assignAction (item) {
            this.activeData = item
            this.assignModalVisible = true
        },
        changeStateAction(itme) {}
    }
}
</script>